<template>
  <div class="imginfo">
    <div class="header">
      <div>{{title}}</div>
      <div>
        <span>发表时间:{{time}}</span>
        <span>评论数:{{$store.getters.getcommentscount}}</span>
      </div>
    </div>
    <imgshow :imagelist="imglist"></imgshow>
    <div class="desc" v-html="txtcontent"></div>
    <comment :cmt_path="$route.path" :cmt_id="imgid"></comment>
  </div>
</template>

<script>
import imgshow from "../mycomponents/imgshow.vue"
import comment from "../comment/comments.vue"
export default {
  data(){
    return{
      imglist:[],
      title:'',
      time:'',
      txtcontent:"",
      imgid:this.$route.params.id
    }
  },
  created(){
    this.getimginfobyid(this.imgid);
  },
  methods:{
    showlist(){
      console.log(this.imglist);
    },
    getimginfobyid(id){
      this.$http.get(`GetImgInfoById/${id}`).then((result)=>{
        var obj = result.body;
        if(obj.status == 0){
          var data = obj.result[0];
          this.title = data.title;
          this.time = data.time;
          this.imglist = JSON.parse(data.img);
          this.txtcontent = data.txt;
        }
      })
    }
  },
  components:{
    imgshow,
    comment
  }
}
</script>

<style lang = 'less' scoped>
  .imginfo{
    padding: 0 5px;
    .desc{
      padding: 0px 8px;
      p{
        color: rgba(0,0,0,0.9);
      }
      
    }
    .header{
      >div:first-of-type{
        text-align: center;
        font-size: 18px;
        padding: 5px 0px;
        font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        color:cornflowerblue
      }
      >div:last-of-type{
        padding: 4px 6px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 14px;
        color: rgb(103, 104, 102);
      }
    }

  }
</style>